<template>
  <div>
    <el-row>
      <el-button @click="goBack">
        <el-icon>
          <Back />
        </el-icon>
      </el-button>
    </el-row>
    <el-row>
      <el-col style="font-size: 24px" :span="16">{{
        apiInformation.name
      }}</el-col>

      <el-col :span="8" style="font-size: 18px">
        <el-row>
          <el-col :span="6">Popularity</el-col>
          <el-col :span="6">Latency</el-col>
          <el-col :span="6">Service Level</el-col>
          <el-col :span="6">Health Check</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">{{ apiInformation.popularity }}/10</el-col>
          <el-col :span="6">{{ apiInformation.latency }}ms</el-col>
          <el-col :span="6">{{ apiInformation.serviceLevel }}%</el-col>
          <el-col :span="6">{{ apiInformation.healthCheck }}%</el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider />
    <el-row>{{ apiInformation.description }}</el-row>
    <el-divider />
    <el-row>
      <el-tabs tab-position="left" v-model="selectedIndex">
        <el-tab-pane
          v-for="(item, index) in apiInformation.endpoints"
          :key="index"
          :name="item.endpointName"
        >
          <template #label>
            <span>{{ item.endpointName }}</span>
          </template>
        </el-tab-pane>
        <!-- 内容展示区 -->
        <el-row style="width: 2000px">
          <el-text>说明</el-text>
        </el-row>
        <el-row>
          <el-text>{{ selectedEndpoint.endpointDescription }}</el-text>
        </el-row>
        <el-divider />
        <el-row>
          <el-text>必选参数</el-text>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-text>变量名</el-text>
            <el-row
              v-for="(varName, index) in selectedEndpoint.params.参数名"
              :key="index"
              >{{ varName }}</el-row
            >
          </el-col>
          <el-col :span="6">
            <el-text>变量类型</el-text>
            <el-row
              v-for="(varType, index) in selectedEndpoint.params.参数类型"
              :key="index"
              >{{ varType }}</el-row
            >
          </el-col>
          <el-col :span="12">
            <el-text>变量说明</el-text>
            <el-row
              v-for="(varDescription, index) in selectedEndpoint.params
                .参数注意事项"
              :key="index"
              >{{ varDescription }}</el-row
            >
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-text>可选参数</el-text>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-text>变量名</el-text>
            <el-row
              v-for="(varName, index) in selectedEndpoint.paramsOptional
                .参数名"
              :key="index"
              >{{ varName }}</el-row
            >
          </el-col>
          <el-col :span="6">
            <el-text>变量类型</el-text>
            <el-row
              v-for="(varType, index) in selectedEndpoint.paramsOptional
                .参数类型"
              :key="index"
              >{{ varType }}</el-row
            >
          </el-col>
          <el-col :span="12">
            <el-text>变量说明</el-text>
            <el-row
              v-for="(varDescription, index) in selectedEndpoint.paramsOptional
                .参数注意事项"
              :key="index"
              >{{ varDescription }}</el-row
            >
          </el-col>
        </el-row>
      </el-tabs>
    </el-row>
  </div>
</template>
<script>
import { Back } from "@element-plus/icons-vue";
import searchApi from "@/api/search";
import detailApi from "@/api/detail";

export default {
  data() {
    return {
      id: 123,
      selectedIndex: 0,
      apiInformation: {
        name: "TextTranslator",
        author: "Devisty",
        updateTime: "2023-01-01",
        popularity: 9.9,
        latency: 900,
        serviceLevel: 100,
        healthCheck: 100,
        description:
          "Translate text to 100+ languages, Fast processing, cost saving. Free up to 100,000 characters per month",
        endpoints: [
          {
            id: 12445,
            endpointName: "hello",
            host: "get",
            endpointDescription: "description",
            endpointCategory: "type",
            params: {
              paramNames: ["lan", "text"],
              paramType: ["String", "String"],
              paramsDescription: ["hhh", "hhhh"],
            },
            paramsOptional: {
              paramNames: ["lan", "text"],
              paramType: ["String", "String"],
              paramsDescription: ["hhh", "hhhh"],
            },
          },
          {
            id: 124456,
            endpointName: "hi",
            host: "get",
            endpointDescription: "description",
            endpointCategory: "type",
            params: {
              参数名: ["lan2", "text2"],
              参数类型: ["String", "String"],
              参数注意事项: ["hhh11", "hhhh111"],
            },
            paramsOptional: {
              // paramNames: ["lan2", "text2"],
              // paramType: ["String", "String"],
              // paramsDescription: ["hhh", "hhhh"],
              参数名: ["lan2", "text2"],
              参数类型: ["String", "String"],
              参数注意事项: ["hhh11", "hhhh111"],
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.apiInformation.name = this.$route.params.apiName;

    this.getApiInformationBasic(this.apiInformation.name);

    this.getEndPoints(this.apiInformation.name);
  },
  components: {
    Back,
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },

    getApiInformationBasic(apiName) {
      searchApi
        .searchByApiName(apiName)
        .then((result) => {
          this.id = result.data.data.id;
          this.apiInformation.author = result.data.data.author;
          this.apiInformation.category = result.data.data.category;
          this.apiInformation.description = result.data.data.description;
          this.apiInformation.latency = result.data.data.latency;
          this.apiInformation.popularity = result.data.data.popularity;
          this.apiInformation.serviceLevel = result.data.data.serviceLevel;
          this.apiInformation.updateTime = result.data.data.updateTime;
        })
        .finally();
    },
    getEndPoints(apiName) {
      detailApi.getDetailByApiName(apiName).then((result) => {
        this.apiInformation.endpoints = result.data.data;
        console.log(result.data)

      });
    },
  },
  computed: {
    selectedEndpoint() {
      if (this.selectedIndex !== null) {
        // console.log(this.apiInformation.endpoints[this.selectedIndex]);
        // console.log("---------------");
        
        return this.apiInformation.endpoints[this.selectedIndex];
      }
      return null;
    },
  },
};
</script>

<style>
.rightBorder {
  border-right-style: solid;
}
</style>